Node / mirrors / respira / files / src / components / PatternInfo.tsx

Displaying Raw • Download

import type { PesPatternData } from "../formats/import/pesImporter";

import {

Tooltip,

TooltipContent,

TooltipProvider,

TooltipTrigger,

} from "@/components/ui/tooltip";

import { Separator } from "@/components/ui/separator";

interface PatternInfoProps {

pesData: PesPatternData;

showThreadBlocks?: boolean;

}

export function PatternInfo({

pesData,

showThreadBlocks = false,

}: PatternInfoProps) {

return (

<>

<TooltipProvider>

<div className="grid grid-cols-3 gap-2 text-xs mb-2">

<Tooltip>

<TooltipTrigger asChild>

<div className="bg-gray-200 dark:bg-gray-700/50 p-2 rounded cursor-help">

<span className="text-gray-600 dark:text-gray-400 block">

Size

</span>

<span className="font-semibold text-gray-900 dark:text-gray-100">

{((pesData.bounds.maxX - pesData.bounds.minX) / 10).toFixed(

1,

)}{" "}

x{" "}

{((pesData.bounds.maxY - pesData.bounds.minY) / 10).toFixed(

1,

)}{" "}

mm

</span>

</div>

</TooltipTrigger>

<TooltipContent>

<p className="text-xs">Pattern dimensions (width × height)</p>

</TooltipContent>

</Tooltip>

<Tooltip>

<TooltipTrigger asChild>

<div className="bg-gray-200 dark:bg-gray-700/50 p-2 rounded cursor-help">

<span className="text-gray-600 dark:text-gray-400 block">

Stitches

</span>

<span className="font-semibold text-gray-900 dark:text-gray-100">

{pesData.penStitches?.stitches.length.toLocaleString() ||

pesData.stitchCount.toLocaleString()}

{pesData.penStitches &&

pesData.penStitches.stitches.length !==

pesData.stitchCount && (

<span

className="text-gray-500 dark:text-gray-500 font-normal ml-1"

title="Input stitch count from PES file (lock stitches were added for machine compatibility)"

>

({pesData.stitchCount.toLocaleString()})

</span>

)}

</span>

</div>

</TooltipTrigger>

<TooltipContent className="max-w-xs">

<p className="text-xs">

{pesData.penStitches &&

pesData.penStitches.stitches.length !== pesData.stitchCount

? \\`Total stitches including lock stitches. Original file had ${pesData.stitchCount.toLocaleString()} stitches.\\`

: "Total number of stitches in the pattern"}

</p>

</TooltipContent>

</Tooltip>

<Tooltip>

<TooltipTrigger asChild>

<div className="bg-gray-200 dark:bg-gray-700/50 p-2 rounded cursor-help">

<span className="text-gray-600 dark:text-gray-400 block">

{showThreadBlocks ? "Colors / Blocks" : "Colors"}

</span>

<span className="font-semibold text-gray-900 dark:text-gray-100">

{showThreadBlocks

? \\`${pesData.uniqueColors.length} / ${pesData.threads.length}\\`

: pesData.uniqueColors.length}

</span>

</div>

</TooltipTrigger>

<TooltipContent>

<p className="text-xs">

{showThreadBlocks

? \\`${pesData.uniqueColors.length} unique ${pesData.uniqueColors.length === 1 ? "color" : "colors"} across ${pesData.threads.length} thread ${pesData.threads.length === 1 ? "block" : "blocks"}\\`

: \\`${pesData.uniqueColors.length} unique ${pesData.uniqueColors.length === 1 ? "color" : "colors"} in the pattern\\`}

</p>

</TooltipContent>

</Tooltip>

</div>

</TooltipProvider>

<Separator className="mb-3" />

<div className="flex items-center gap-2 mb-2">

<span className="text-xs text-gray-600 dark:text-gray-400">

Colors:

</span>

<TooltipProvider>

<div className="flex gap-1">

{pesData.uniqueColors.slice(0, 8).map((color, idx) => {

// Primary metadata: brand and catalog number

const primaryMetadata = [

color.brand,

color.catalogNumber ? \\`#${color.catalogNumber}\\` : null,

]

.filter(Boolean)

.join(" ");

// Secondary metadata: chart and description

// Only show chart if it's different from catalogNumber

const secondaryMetadata = [

color.chart && color.chart !== color.catalogNumber

? color.chart

: null,

color.description,

]

.filter(Boolean)

.join(" ");

const metadata = [primaryMetadata, secondaryMetadata]

.filter(Boolean)

.join(" • ");

// Show which thread blocks use this color in PatternSummaryCard

const threadNumbers = color.threadIndices

.map((i) => i + 1)

.join(", ");

const tooltipText = showThreadBlocks

? metadata

? \\`Color ${idx + 1}: ${color.hex} - ${metadata}\\`

: \\`Color ${idx + 1}: ${color.hex}\\`

: metadata

? \\`Color ${idx + 1}: ${color.hex}\\n${metadata}\\nUsed in thread blocks: ${threadNumbers}\\`

: \\`Color ${idx + 1}: ${color.hex}\\nUsed in thread blocks: ${threadNumbers}\\`;

return (

<Tooltip key={idx}>

<TooltipTrigger asChild>

<div

className="w-3 h-3 rounded-full border border-gray-300 dark:border-gray-600 cursor-help"

style={{ backgroundColor: color.hex }}

/>

</TooltipTrigger>

<TooltipContent className="max-w-xs">

<p className="text-xs whitespace-pre-line">{tooltipText}</p>

</TooltipContent>

</Tooltip>

);

})}

{pesData.uniqueColors.length > 8 && (

<Tooltip>

<TooltipTrigger asChild>

<div className="w-3 h-3 rounded-full bg-gray-300 dark:bg-gray-600 border border-gray-400 dark:border-gray-500 flex items-center justify-center text-xs font-bold text-gray-600 dark:text-gray-300 leading-none cursor-help">

+{pesData.uniqueColors.length - 8}

</div>

</TooltipTrigger>

<TooltipContent>

<p className="text-xs">

{pesData.uniqueColors.length - 8} more{" "}

{pesData.uniqueColors.length - 8 === 1 ? "color" : "colors"}

</p>

</TooltipContent>

</Tooltip>

)}

</div>

</TooltipProvider>

</div>

</>

);

}